﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery UI Effects Demo</title>
<link type="text/css" href="../common/demo.css" rel="stylesheet">
<style type="text/css">
#house { position: relative; width: 500px; height: 400px; background: url(house.png) no-repeat center; border: 1px solid #080; }
#blind { position: absolute; left: 26px; top: 71px; width: 200px; height: 150px; }
#tv { position: absolute; left: 264px; top: 149px; }
#ball { position: absolute; left: 50px; top: 220px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="../common/demo.js"></script>
<script type="text/javascript">
$(function() {
	$('#blind').click(function() {
		$(this).hide('slide', {direction: 'up'}, 1000).delay(1000).show('slide', {direction: 'up'});
	});
	$('#tv').click(function() {
		$(this).hide('clip', 1000).delay(1000).show('clip');
	});
	var subVers = parseInt($.ui.version.substring(2));
	$('#ball').click(function() {
		$(this).hide('explode', 1000).delay(1000).show('bounce', subVers < 9 ? 500 : 2000);
	});
});
</script>
</head>
<body>
<h1>jQuery UI Effects Demo</h1>
<p>Click on the objects in the house to see several built-in jQuery UI effects.</p>
<div id="house">
	<div id="blind" title="slide"><img src="blind.png" alt="slide"></div>
	<div id="tv" title="clip"><img src="islands.jpg" alt="clip"></div>
	<div id="ball" title="explode and bounce"><img src="ball.png" alt="explode and bounce"></div>
</div>
</body>
</html>
